<template>
  <div>
    <el-row :gutter="20" style="margin: 0px">
      <div id="particles"></div>
      <el-row>
        <el-col :span="5" style="text-align: center">
          <h1 class="maintitle">OpenMesh</h1>
        </el-col>
        <el-col :span="19"></el-col>
      </el-row>
      <el-row>
        <el-col :span="4" style="padding-left: 10px">
          <div class="grid-content bg-left">
            <el-menu
              :default-openeds="['1', '2']"
              @select="handleSelect"
              style="
                border: solid;
                border-width: 1px;
                border-color: #ebeef5;
                border-radius: 8px;
                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
              "
            >
              <el-submenu index="1">
                <template slot="title">
                  <!-- <i class="el-icon-message"></i> -->
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#iconwangge1"></use>
                  </svg>
                  2D Mesh Generation
                </template>
                <el-submenu index="1-1">
                  <template slot="title">2D Unstructured Mesh</template>
                  <el-menu-item-group>
                    <template slot="title">Triangle</template>
                    <el-menu-item index="1-1-1">Delaunay</el-menu-item>
                    <el-menu-item index="1-1-2">MeshAdapt</el-menu-item>
                    <el-menu-item index="1-1-3">Automatic</el-menu-item>
                    <el-menu-item index="1-1-4">Frontal-Delaunay</el-menu-item>
                    <el-menu-item index="1-1-5">Initial Mesh Only</el-menu-item>
                    <el-menu-item index="1-1-6"
                      >Delaunay for Quads</el-menu-item
                    >
                    <el-menu-item index="1-1-7"
                      >Packing of Parallelograms</el-menu-item
                    >
                  </el-menu-item-group>
                  <el-menu-item-group>
                    <template slot="title">Others</template>
                    <el-menu-item index="1-1-8">Quadrangle</el-menu-item>
                    <el-menu-item index="1-1-9">Voronoi</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="1-2">
                  <template slot="title">2D Structured Mesh</template>
                  <el-menu-item index="1-2-1">Hexagon</el-menu-item>
                  <el-menu-item index="1-2-2">Quadrangle</el-menu-item>
                </el-submenu>
              </el-submenu>
              <el-submenu index="2">
                <template slot="title">
                  <!-- <i class="el-icon-menu"></i> -->
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#iconico-"></use>
                  </svg>
                  2D Mesh Conversion
                </template>
                <el-menu-item-group>
                  <template slot="title">Topological Consistency</template>
                  <el-menu-item index="2-1">
                    Triangle to Quadrangle
                  </el-menu-item>
                  <el-menu-item index="2-2"
                    >Quadrangle to Triangle</el-menu-item
                  >
                </el-menu-item-group>
                <el-menu-item-group title="Topological Incompatibility">
                  <el-menu-item index="2-3">DEM to Hexagon</el-menu-item>
                  <el-menu-item index="2-4">DEM to Triangle</el-menu-item>
                  <el-menu-item index="2-5">DEM to Voronoi</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wanggediqiu"></use>
                  </svg>
                  3D Surface Mesh
                </template>
                <el-menu-item index="3-1">Tetrahedron Division </el-menu-item>
                <el-menu-item index="3-2">Octahedron Division</el-menu-item>
                <el-menu-item index="3-3">Dodecahedron Division</el-menu-item>
                <el-menu-item index="3-4">Icosahedron Division</el-menu-item>
                <el-menu-item index="3-5">Tetrahedron Del3d</el-menu-item>
                <el-menu-item index="3-5">Tetrahedron Front3d</el-menu-item>
                <el-menu-item index="3-5">Tetrahedron Mmg3d</el-menu-item>
                <el-menu-item index="3-5">Tetrahedron Hxt</el-menu-item>
              </el-submenu>
            </el-menu>
          </div>
        </el-col>

        <el-col
          :span="20"
          style="overflow-x: auto; overflow-y: auto; padding-left: 40px"
        >
          <el-backtop></el-backtop>
          <el-row v-for="(item, index) in algoList" :key="index" class="card">
            <el-divider v-if="index == 0" content-position="left">
              2D Unstructured Mesh
            </el-divider>
            <el-divider v-if="index == 9" content-position="left">
              2D Structured Mesh
            </el-divider>
            <el-divider v-if="index == 11" content-position="left">
              2D Mesh Conversion
            </el-divider>
            <el-divider v-if="index == 16" content-position="left">
              3D Surface Mesh
            </el-divider>
            <el-card :body-style="{ padding: '0px' }">
              <el-row style="display: flex">
                <el-col :span="4" class="cardcol" style="text-align: center">
                  <img :src="item.image" class="image" />
                </el-col>
                <el-col :span="14" class="cardcol">
                  <div>
                    <span class="title">{{ item.name }}</span>
                    <span class="par">
                      {{ item.describe }}
                    </span>
                  </div>
                  <div class="option">
                    <el-link
                      type="primary"
                      style="color: #4665a2"
                      @click="href(index)"
                      >Invoke</el-link
                    >
                  </div>
                </el-col>
                <el-col
                  :span="6"
                  class="cardcol"
                  style="display: flex; margin-left: 20px"
                >
                  <div style="align-self: center">
                    <span style="font-weight: bold">Introduced in: </span>
                    <span>OpenMesh1.0</span>
                    <span style="display: block">
                      <span style="font-weight: bold"> Provider: </span
                      >{{ item.provider }}
                    </span>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import "../plugins/iconfont.js";
export default {
  data() {
    return {
      //控制回到顶部按键可见性
      btnFlag: false,
      //算法内容列表
      algoList: [
        {
          image: require("../assets/image/delaunaymesh-small.png"),
          name: "Delaunay",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/meshadapt.png"),
          name: "MeshAdapt",
          describe:
            "MeshAdapt is an efficient triangular mesh generation algorithm provided by GMSH,For very complex curved surfaces the “MeshAdapt” algorithm is the most robust.",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tri1.png"),
          name: "Automatic",
          describe:
            "Automatic is an efficient triangular mesh generation algorithm provided by GMSH,The “Automatic” algorithm uses “Delaunay” for plane surfaces and “MeshAdapt” for all other surfaces.",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tri7.png"),
          name: "Frontal-Delaunay",
          describe:
            "The Frontal-Delaunay algorithm is an efficient unstructured mesh generation method entirely based on the Delaunay triangulation. The distinctive characteristic of the proposed method is that point positions and connections are computed simultaneously. This result is achieved by taking advantage of the sequential way in which the Bowyer-Watson algorithm computes the Delaunay triangulation. ",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tri4.png"),
          name: "Initial Mesh Only",
          describe:
            "Initial Mesh Only is a simple triangle Mesh generation algorithm without insertion points inside the triangle",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tri6.png"),
          name: "Delaunay for Quads",
          describe:
            "The internal points inserted by the Delaunay for Quads algorithm are distributed according to the regular quadrilateral structure",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tri5.png"),
          name: "Packing of Parallelograms",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },

        {
          image: require("../assets/image/tri3.png"),
          name: "Quadrangle",
          describe:
            "Quadrangle algorithm generates Quadrangle cells by fusing triangle cells generated by “Delaunay for Quads” algorithm",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/voronoi.png"),
          name: "Voronoi",
          describe:
            "The Voronoi Diagram is a series of continuous polygons composed of vertical bisectors connecting two adjacent line segments. The distance from any point in a Tyson polygon to the control point that constitutes the polygon is less than the distance from the control points of other polygons",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Hexagon.png"),
          name: "Hexagon",
          describe:
            "The regular hexagonal grid generation algorithm is developed by OpenGMS, which can realize the hexagonal discrete computation region",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Quadrangle.png"),
          name: "Square",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/voronoi.png"),
          name: "Triangle to Quadrangle",
          describe:
            "The voronoi mesh generation algorithm is developed by OpenGMS, which can realize the voronoidiscrete computation region",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/tra1.png"),
          name: "Quadrangle  to Triangle",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/demtohex.png"),
          name: "DEM  to Hexagon",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/demtotri.png"),
          name: "DEM  to Triangle",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/demtovoronoi.png"),
          name: "DEM  to Voronoi",
          describe:
            "Delaunay triangulation is an excellent triangulation algorithm with maximized minimum Angle, closest to regular triangulation network and uniqueness (any four points cannot be co-circular)",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Tetrahedron.png"),
          name: "Tetrahedron Division",
          describe:
            "The spherical division of Tetrahedron is realized by using the built-in three.js algorithm, and the initial regular tetrahedron is continuously refined to obtain spherical meshes of different scales",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Octahedron.png"),
          name: "Octahedron Division",
          describe:
            "The spherical division of Octahedron is realized by using the built-in three.js algorithm, and the initial regular tetrahedron is continuously refined to obtain spherical meshes of different scales",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Dodecahedron.png"),
          name: "Dodecahedron Division",
          describe:
            "The spherical division of Dodecahedron is realized by using the built-in three.js algorithm, and the initial regular tetrahedron is continuously refined to obtain spherical meshes of different scales",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Icosahedron.png"),
          name: "Icosahedron Division",
          describe:
            "The spherical division of Icosahedron is realized by using the built-in three.js algorithm, and the initial regular tetrahedron is continuously refined to obtain spherical meshes of different scales",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Tetrahedron1.png"),
          name: "Tetrahedron Del3d",
          describe:
            "The “Delaunay” algorithm is split into three separate steps. First, an initial mesh of the union of all the volumes in the model is performed, without inserting points in the volume. The surface mesh is then recovered using H. Si’s boundary recovery algorithm Tetgen/BR. Then a three-dimensional version of the 2D Delaunay algorithm described above is applied to insert points in the volume to respect the mesh size constraints.",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Tetrahedron2.png"),
          name: "Tetrahedron Front3d",
          describe:
            "The 3D algorithm Front3d provided by GMSH uses  Netgen algorithm",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Tetrahedron3.png"),
          name: "Tetrahedron Mmg3d",
          describe:
            "The 3D algorithm Mmg3d provided by GMSH , “MMG3D” allows to generate anisotropic tetrahedralizations",
          core: "GMSH",
          provider: "HYQ",
        },
        {
          image: require("../assets/image/Tetrahedron4.png"),
          name: "Tetrahedron Hxt",
          describe:
            "The “HXT” algorithm is a new efficient and parallel reimplementaton of the Delaunay algorithm",
          core: "GMSH",
          provider: "HYQ",
        },
      ],
    };
  },
  methods: {
    href(par) {
      if (par < 16) {
        this.$router.push({
          path: "/paintingpanel",
          query: {
            algotag: par,
          },
        });
      } else {
        this.$router.push({
          path: "/threedwindows",
          query: {
            algotag: par,
          },
        });
      }
    },
    handleSelect(key, keyPath) {
      // let scrollTop =
      //   window.pageYOffset ||
      //   document.documentElement.scrollTop ||
      //   document.body.scrollTop;
      // this.scrollTop = scrollTop;
      // console.log(this.scrollTop);

      if (key == "1-1-1") {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
      } else if (key == "1-1-2") {
        document.documentElement.scrollTop = document.body.scrollTop = 260;
      } else if (key == "1-1-3") {
        document.documentElement.scrollTop = document.body.scrollTop = 412;
      } else if (key == "1-1-4") {
        document.documentElement.scrollTop = document.body.scrollTop = 603;
      } else if (key == "1-1-5") {
        document.documentElement.scrollTop = document.body.scrollTop = 766;
      } else if (key == "1-1-6") {
        document.documentElement.scrollTop = document.body.scrollTop = 921;
      } else if (key == "1-1-7") {
        document.documentElement.scrollTop = document.body.scrollTop = 1120;
      } else if (key == "1-1-8") {
        document.documentElement.scrollTop = document.body.scrollTop = 1265;
      } else if (key == "1-1-9") {
        document.documentElement.scrollTop = document.body.scrollTop = 1456;
      } else if (key == "1-2-1") {
        document.documentElement.scrollTop = document.body.scrollTop = 1627;
      } else if (key == "1-2-2") {
        document.documentElement.scrollTop = document.body.scrollTop = 1827;
      } else if (key == "2-1") {
        document.documentElement.scrollTop = document.body.scrollTop = 1978;
      } else if (key == "2-2") {
        document.documentElement.scrollTop = document.body.scrollTop = 2189;
      } else if (key == "2-3") {
        document.documentElement.scrollTop = document.body.scrollTop = 2189;
      } else if (key == "2-4") {
        document.documentElement.scrollTop = document.body.scrollTop = 2189;
      } else if (key == "2-5") {
        document.documentElement.scrollTop = document.body.scrollTop = 2189;
      } else if (key == "3-1") {
        document.documentElement.scrollTop = document.body.scrollTop = 2400;
      } else if (key == "3-2") {
        document.documentElement.scrollTop = document.body.scrollTop = 2400;
      } else if (key == "3-3") {
        document.documentElement.scrollTop = document.body.scrollTop = 2400;
      } else if (key == "3-4") {
        document.documentElement.scrollTop = document.body.scrollTop = 2800;
      } else if (key == "3-5") {
        document.documentElement.scrollTop = document.body.scrollTop = 2800;
      } else if (key == "3-6") {
        document.documentElement.scrollTop = document.body.scrollTop = 2800;
      } else if (key == "3-7") {
        document.documentElement.scrollTop = document.body.scrollTop = 2800;
      } else if (key == "3-8") {
        document.documentElement.scrollTop = document.body.scrollTop = 2800;
      }
      // console.log(key, keyPath);
    },
    // 回到顶部
    backTop() {
      console.log("你点击了Top按钮");
      const that = this;
      let ispeed = -200;
      let timer = setInterval(() => {
        // console.log(ispeed);
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed;
        if (that.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 10);
    },
    // // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    // handleScroll() {
    //   const that = this;
    //   let scrollTop =
    //     window.pageYOffset ||
    //     document.documentElement.scrollTop ||
    //     document.body.scrollTop;
    //   that.scrollTop = scrollTop;
    //   if (that.scrollTop > 60) {
    //     that.btnFlag = true;
    //   } else {
    //     that.btnFlag = false;
    //   }
    // },
  },
  mounted() {
    particlesJS.load("particles", "particles.json", function () {});
    // window.addEventListener("scroll", this.handleScroll, true); // 监听（绑定）滚轮滚动事件
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll); //  离开页面清除（移除）滚轮滚动事件
  },
};
</script>
<style lang="less">
.maintitle {
  margin-bottom: 0px;
  color: white;
}

.particles-js-canvas-el {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background-image: initial;
  background-size: initial;
  background-attachment: initial;
  background-origin: initial;
  background-clip: initial;
  background-color: rgb(15, 28, 112);
  background-repeat: repeat-y;
}

.image {
  border-radius: 8px;
  width: auto;
  height: 100px;
}

.icon {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.35em;
  fill: currentColor;
  overflow: hidden;
}
.el-divider__text.is-left {
  border-radius: 4px;
}
.el-divider__text {
  font-weight: bold;
  font-style: italic;
  font-size: 20px;
}

.cardcol {
  align-self: center;
}

.option {
  color: rgb(0, 0, 0);
}

.par {
  display: block;
}

.title {
  font-weight: bold;
  font-style: italic;
  display: block;
  margin-bottom: 6px;
}

.el-row {
  height: 100%;
}

.card {
  margin: 20px;
  margin-top: 10px;
  height: 100%;
}

.el-col {
  height: 100%;
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.bg-left {
  height: 100%;
  // background: #ffffff;
  margin-top: 30px;
  margin-left: 10px;
  border: solid;
  border-width: 1px;
  border-color: #ebeef5;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.bg-main {
  height: 100%;
  background: #6e1e1e;
}

.el-menu {
  border-radius: 8px;
}
</style>